<template>
	<view>
		<view class="card" style="padding-bottom: 0rpx;">
			<view class="list" :style="{opacity:source=='subscribe' && itemData.status == 2 ?'0.5':'1'}">
				<image :src="itemData.imageUrl" mode="" class="photo" v-if="itemData.imageType == 'image'"></image>
				<video :src="itemData.imageUrl" class="photo" v-else></video>
				<view class="rigth_box" @click="handleDetails(itemData.houseId)">
					<view class="title">
						{{itemData.name}}
					</view>
					<view class="title_1" v-if="showType.infolabel">
						{{itemData.area}}m² ｜ {{itemData.floorNum}}/{{itemData.totalFloorNum}}层 ｜
						{{itemData.facingName}}
					</view>
					<view class="address_box" v-if="showType.address">
						<image src="/static/coment/adderss.svg" mode=""></image>
						<text>{{itemData.address}}</text>
					</view>
					<view class="price">
						<text>¥</text>
						{{itemData.price}}
						<text>/月</text>
					</view>
					<view class="title_1" v-if="showType.time && userType == 'admin'">
						预约人：{{itemData.nickName}}
					</view>
					<view class="title_1" v-if="showType.time && userType == 'admin'">
						手机号码：{{itemData.contactPhone}}
					</view>
					<view class="title_1" v-if="showType.time">
						预约时间：{{itemData.appointmentTime}}
					</view>
					<view class="title_1" v-if="false">
						取消备注：用户已手动取消
					</view>
					<view class="label_box" v-if="showType.label && itemData.tagNameList">
						<text v-for="item in itemData.tagNameList" :key="item">{{item}}</text>
						<!-- <text>近地铁</text>
						<text>有电梯</text>
						<text>可上网</text> -->
					</view>
				</view>
				<view class="state_icon" v-if="source=='browsingHistory'">
					<image src="https://hosue-omo.oss-cn-shenzhen.aliyuncs.com/assets/yixiajia.png" mode="aspectFit"
						v-if="itemData.status == 0"></image>
					<image src="https://hosue-omo.oss-cn-shenzhen.aliyuncs.com/assets/daizu.png" mode="aspectFit"
						v-if="itemData.status == 1"></image>
					<image src="https://hosue-omo.oss-cn-shenzhen.aliyuncs.com/assets/zaizu.png" mode="aspectFit"
						v-if="itemData.status == 2"></image>
					<image src="/pagesA/static/hoom/suoding.png" mode="aspectFit" v-if="itemData.status == 3"></image>
				</view>
				<view class="state_icon" v-if="source=='subscribe'">
					<!-- 0待看1完成2取消 -->
					<image src="/pagesA/static/hoom/daikan.png" mode="aspectFit" v-if="itemData.status == 0"></image>
					<image src="/pagesA/static/hoom/wancheng.png" mode="aspectFit" v-if="itemData.status == 1"></image>
					<image src="/pagesA/static/hoom/4.png" mode="aspectFit" v-if="itemData.status == 2"></image>
				</view>
			</view>
			<view class="line" v-if="itemData.status != 2" />
			<view class="handle_box" v-if="itemData.status != 2">

				<view class="btn complete_btn" v-if="source=='browsingHistory'" @click="handleClear(itemData.id)">
					删除
				</view>
				<view class="btn complete_btn" v-if="source=='subscribe' && itemData.status == 0"
					@click="handleClear(itemData.id)">
					取消
				</view>
				<view class="btn complete_btn" v-if="source=='subscribe' && itemData.status == 0 && userType == 'admin'"
					@click="handleJump(itemData)">
					上传合同
				</view>
				<!-- <view class="btn complete_btn" v-if="source=='subscribe' && itemData.status == 1" @click="handleJumpAdd(itemData)">
					去评价
				</view> -->
			</view>

		</view>
	</view>
</template>

<script setup>
	import {
		reactive
	} from 'vue';
	const emit = defineEmits(['clearItem']);
	const props = defineProps({
		source: {
			type: String,
			default: 'subscribe'
		},
		showType: {
			type: Object,
			default: () => {
				return {
					infolabel: true,
					address: true,
					time: true,
					label: true
				}

			}
		},
		itemData: {
			type: Object,
			default: () => {}
		},
		userType: {
			type: String,
			default: ''
		}
	})
	const handleClear = (id) => {
		emit('clearItem', id)
	}
	const handleJump = (item) => {

		uni.navigateTo({
			url: '/pagesA/uploadContract/uploadContract?type=add&id=' + item.id + '&houseName=' + item.name +
				'&houseId=' + item.houseId + '&price=' + item.price + '&manageAmount='+item.manageAmount
		})
	}
	const handleJumpAdd = (item) => {
		uni.navigateTo({
			url: '/pagesA/addEvaluate/addEvaluate'
		})
	}
	const handleDetails = (id) => {
		if (id) {
			uni.navigateTo({
				url: '/pagesA/details/details?id=' + id
			})
		}

	}
</script>

<style lang="less" scoped>
	.card {
		margin-top: 16rpx;
		padding: 30rpx;
		background: #FFFFFF;

		.list {
			display: flex;
			margin-bottom: 16rpx;
			position: relative;

			.photo {
				width: 230rpx;
				height: 204rpx;
				margin-right: 24rpx;
			}

			.rigth_box {
				.title {
					font-family: PingFangSC-Semibold;
					font-size: 30rpx;
					color: #000000;
					line-height: 36rpx;
					font-weight: 600;
					margin-bottom: 12rpx;
				}

				.title_1 {
					font-family: ArialMT;
					font-size: 24rpx;
					color: #666666;
					line-height: 26rpx;
					font-weight: 400;
					margin-bottom: 12rpx;
				}

				.address_box {
					display: flex;
					align-items: center;
					margin-bottom: 12rpx;

					image {
						width: 24rpx;
						height: 24rpx;
						margin-right: 8rpx;
					}

					text {
						font-family: PingFangSC-Regular;
						font-size: 24rpx;
						color: #666666;
						line-height: 26rpx;
						font-weight: 400;
					}
				}

				.price {
					font-family: Arial-BoldMT;
					font-size: 32rpx;
					color: #EE7930;
					// text-align: right;
					// line-height: 36rpx;
					font-weight: 700;
					margin-bottom: 12rpx;

					text {
						font-family: PingFangSC-Regular;
						font-size: 24rpx;
						color: #EE7930;
						text-align: right;
						// line-height: 36rpx;
						font-weight: 400;
					}
				}

				.label_box {
					display: flex;
					align-items: center;

					text {
						font-family: PingFangSC-Regular;
						font-size: 20rpx;
						color: #666666;
						// line-height: 24rpx;
						font-weight: 400;
						margin-right: 8rpx;
						padding: 4rpx 8rpx;
						background: #F2F2F2;
						border-radius: 4rpx;
					}
				}

				.list_tip {
					font-family: PingFangSC-Regular;
					font-size: 24rpx;
					color: #666666;
					// line-height: 26rpx;
					font-weight: 400;
					margin-bottom: 16rpx;
				}
			}

			.state_icon {
				position: absolute;
				right: 0rpx;
				top: 0rpx;
				width: 90rpx;
				height: 90rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}
		}

		.line {
			background: #eeeeee;
			height: 1rpx;
			// margin: 0 30rpx;
		}

		.handle_box {
			height: 86rpx;
			display: flex;
			justify-content: flex-end;
			align-items: center;

			.btn {
				height: 54rpx;
				width: 132rpx;
				line-height: 54rpx;
				text-align: center;
				font-family: PingFangSC-Regular;
				font-size: 24rpx;
				font-weight: 400;
				border-radius: 8rpx;
				margin-left: 16rpx;
			}

			// .cancel_btn {
			// 	border: 2rpx solid rgba(238, 121, 48, 1);
			// 	color: #EE7930;
			// 	margin-right: 16rpx;

			// }

			.complete_btn {
				background: #EE7930;
				color: #FFFDFC;

			}
		}
	}
</style>